<template>
    <!-- 组件的结构 -->
    <div>
        <h2>学校名称：{{ schoolName }}</h2>
        <h2>学校地址：{{ schoolAddress }}</h2>
        <button @click="showX">点我输出学校名</button>
    </div>
</template>

<script>
// 组件交互相关的代码（数据，方法等）
export default {
    name: 'SchoolInfo',
    data() {
        return {
            schoolName: '国防科技大学',
            schoolAddress: '中国'
        }
    },
    methods: {
        showX() {
            console.log(this.schoolName)
        }
    }
}
</script>

<style>
/* 组件的样式 */
.demo {
    background-color: aqua;
}
</style>